<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>15_盒子模型-内边距-不同元素显示模式设置内边距</title>

        <style>
            /*  (1) 块级元素 */
            /* div {
               border: 1px solid black;
               background-color: aqua; 
               padding: 30px;
            } */

            /* (2) 行内元素 */
            span {
                border: 1px solid black;
                background-color: aqua;
                padding: 30px; 
            }

            /* (3) 行内块元素  */
            /* img {
                padding: 30px;
            } */

        </style>
    </head>
    <body>
        <!-- (1) 块级元素 可以设置内边距 -->
        <!-- <div>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto blanditiis perspiciatis dolor eius placeat iste aut, cumque nihil esse autem, similique, est consectetur architecto ut corrupti. Magnam voluptatem officia cumque.
        </div>

        <div>今天开始你要自己上厕所</div> -->

        <!-- (2) 行内元素 
        行内元素可以完美地设置左右内边距，上下内边距不能完美设置
        -->
        <span>
            Lorem ipsum dolor sit amet consectetur adipisicing 
        </span>
        <div>今天开始你要自己上厕所</div>

        <!-- (3) 行内块元素 -->
        <!-- <img src="./img/mzq.jpg">
        <div>今天开始你要自己上厕所</div> -->
    </body>
</html>